<!--
 * @Description: ACL应用
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:30:11
 * @LastEditTime: 2021-11-17 10:39:54
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content" style="padding: 0">
    <div class="table-top">
      <!-- 刷新 -->
      <el-button size="medium" plain @click="reset">刷新</el-button>
      <!-- 新建 -->
      <el-button size="medium" type="primary" plain @click="handleCreate" v-power="2">新建</el-button>
    </div>
    <tao-table
      class="table-box"
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
    >
      <el-table-column label="ID" align="center" width="100" sortable prop="id" />
      <el-table-column label="名称" show-overflow-tooltip min-width="200" prop="displayName" />
      <el-table-column label="类型" align="center" width="100" prop="appType">
        <template slot-scope="scope">
          <span v-if="scope.row.appType === 'ANY'">自定义</span>
          <span v-else>预定义</span>
        </template>
      </el-table-column>
      <el-table-column label="应用" align="center" width="100" prop="appType">
        <template slot-scope="scope">
          <span
            v-if="scope.row.applicationType === 'Acl'"
          >{{scope.row.appType === 'ANY'? '自定义': scope.row.appType}}</span>
          <span v-if="scope.row.applicationType === 'Dpi'">{{ filterDpi(scope.row.dpiId) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="监控" align="center" width="100" prop="log">
        <template slot-scope="scope">{{scope.row.log ? '开启' : '关闭'}}</template>
      </el-table-column>
      <el-table-column label="协议" align="center" width="100" prop="props.ipProtocol.type">
        <template slot-scope="scope">
          <span
            v-if="scope.row.props"
          >{{scope.row.applicationType === 'Acl' ? scope.row.props.ipProtocol.type : '-'}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="源" align="center" width="250" prop="props.source">
        <template slot-scope="scope">
          <div v-if="scope.row.applicationType === 'Acl'">
            <div v-if="scope.row.props">
              <span
                v-if=" scope.row.props.ipProtocol.type === 'UDP' || scope.row.props.ipProtocol.type === 'TCP'"
              >{{scope.row.props.source.anyIp ? '任意IP' : scope.row.props.source.ip + ' Port: ' + scope.row.props.source.portFrom + '-' + scope.row.props.source.portTo}}</span>
              <span v-else>{{ scope.row.props.source.anyIp ? '任意IP' : scope.row.props.source.ip}}</span>
            </div>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="目的" align="center" width="250" prop="props.dest">
        <template slot-scope="scope">
          <div
            v-if="scope.row.props && scope.row.applicationType === 'Acl'"
          >{{ scope.row.props | filterDest }}</div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column fixed="right" align="center" label="操作" width="80px">
        <!-- 删除-->
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #FA6962"
            icon="el-icon-delete"
            @click="handleDelete(scope)"
            v-power="ne.dgId === 100000 ? 0 : 2"
          >删除</el-button>
        </template>
      </el-table-column>
    </tao-table>
    <forms
      v-if="dialogStatus"
      :ne="ne"
      :type="type"
      :dialogStatus="dialogStatus"
      :data="data"
      @handleDialog="handleDialog($event)"
    />
  </div>
</template>

<script>
import forms from './forms';
export default {
  props: ['ne'],
  components: {
    forms
  },
  data () {
    return {
      dataList: [],
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      type: 'create',
      dialogStatus: false,
      data: {},
      dpiList: [
        { id: 1, value: 'office', label: 'office' },
        { id: 2, value: 'baidu', label: '百度' },
        { id: 3, value: 'wechat', label: '微信' },
        { id: 4, value: 'youku', label: '优酷' },
        { id: 5, value: 'qq', label: 'QQ' },
        { id: 6, value: 'zoom', label: 'ZOOM' },
        { id: 7, value: 'douyin', label: '抖音' },
        { id: 8, value: 'bilibili', label: '哔哩哔哩' },
        { id: 9, value: 'jinritoutiao', label: '今日头条' },
        { id: 10, value: 'iqiyi', label: '爱奇艺' },
        { id: 11, value: 'neteasemail', label: '网易邮箱' },
      ]
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  filters: {
    filterDest (val) {
      switch (val.ipProtocol.type) {
        case 'UDP':
          if (val.dest.anyIp) {
            if (val.dest.portTo === -1) {
              val = '任意IP:端口';
            } else {
              val = '任意IP Port: ' + val.dest.portFrom + '-' + val.dest.portTo;
            }
          } else {
            val = val.dest.ip + ' Port: ' + val.dest.portFrom + '-' + val.dest.portTo;
          }
          break;
        case 'TCP':
          if (val.dest.anyIp) {
            if (val.dest.portTo === -1) {
              val = '任意IP:端口';
            } else {
              val = '任意IP Port: ' + val.dest.portFrom + '-' + val.dest.portTo;
            }
          } else {
            val = val.dest.ip + ' Port: ' + val.dest.portFrom + '-' + val.dest.portTo;
          }
          break;
        default:
          if (val.dest.anyIp) {
            val = '任意IP';
          } else {
            val = val.dest.ip;
          }
          break;
      }
      return val;
    }
  },
  methods: {
    // 新建
    handleCreate () {
      let _this = this;
      _this.type = 'create';
      _this.dialogStatus = true;
      _this.data = {};
    },
    // 编辑
    handleUpdate (data) {
      let _this = this;
      _this.type = 'update';
      _this.dialogStatus = true;
      _this.data = data;
    },
    // 回调
    handleDialog (val) {
      let _this = this;
      _this.dialogStatus = val;
      _this.type = 'create';
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        neId: _this.ne.id,
        keyword: 'APP',
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/application/aclrule/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          _this.page.total = resultBody.count;
          _this.dataList = resultBody.objects;
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
    // 删除
    handleDelete (scope) {
      let _this = this;
      this.$confirm('您确定要删除当前数据吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        let params = scope.row;
        params.siteId = _this.ne.extAttrs.siteId;
        _this.$http.deleted({
          url: '/api/sdwan/application/aclrule',
          data: params
        }).then(res => {
          let { status } = res;
          if (status === '0') {
            _this.$message.success('删除成功！');
            _this.refresh();
          }
        });
      }).catch(() => {
        _this.$message.info('取消删除');
      });
    },
    // 返回dpi名称
    filterDpi (val) {
      if (val === 0) {
        return '-';
      } else {
        let o = this.dpiList.find(item => item.id === val);
        if (o) {
          return o.label;
        } else {
          return '-';
        }
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  .table-top {
    margin-bottom: 15px;
  }
  .table-box {
    ::v-deep .el-button {
      padding: 0;
    }
    ::v-deep .el-dropdown-link {
      cursor: pointer;
      color: #409eff;
    }
  }
}
</style>